<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>积分兑换 - 社交平台</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    /* 基础样式 */
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: #f5f7fa;
      color: #333;
      min-height: 100vh;
      margin: 0;
    }
    
    /* 顶部导航 */
    .top-nav {
      height: 50px;
      background-color: #fff;
      border-bottom: 1px solid #eee;
      display: flex;
      align-items: center;
      padding: 0 15px;
      position: sticky;
      top: 0;
      z-index: 100;
    }
    
    .nav-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0 auto;
    }
    
    .nav-btn {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #666;
      text-decoration: none;
    }
    
    /* 积分信息栏 */
    .points-info {
      background: linear-gradient(135deg, #4361ee, #3a0ca3);
      color: white;
      padding: 15px;
      text-align: center;
    }
    
    .points-amount {
      font-size: 28px;
      font-weight: 700;
      margin: 5px 0;
    }
    
    .points-desc {
      font-size: 13px;
      opacity: 0.9;
    }
    
    .recharge-link {
      color: white;
      text-decoration: underline;
      font-size: 14px;
      margin-top: 5px;
      display: inline-block;
    }
    
    /* 样式切换器 */
    .style-switcher {
      background-color: #fff;
      padding: 12px 15px;
      border-bottom: 1px solid #eee;
    }
    
    .style-tabs {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      padding-bottom: 5px;
    }
    
    .style-tabs::-webkit-scrollbar {
      display: none;
    }
    
    .style-tab {
      padding: 6px 14px;
      background-color: #f5f7fa;
      border-radius: 20px;
      font-size: 14px;
      white-space: nowrap;
      cursor: pointer;
    }
    
    .style-tab.active {
      background-color: #4361ee;
      color: white;
    }
    
    /* 通用兑换页面样式 */
    .exchange-page {
      display: none;
    }
    
    .exchange-page.active {
      display: block;
    }
    
    /* 分类标签 */
    .category-tabs {
      display: flex;
      overflow-x: auto;
      padding: 10px 15px;
      gap: 10px;
      background-color: white;
      border-bottom: 1px solid #eee;
    }
    
    .category-tabs::-webkit-scrollbar {
      display: none;
    }
    
    .category-tab {
      padding: 5px 12px;
      border-radius: 15px;
      font-size: 14px;
      white-space: nowrap;
      cursor: pointer;
      background-color: #f5f7fa;
    }
    
    .category-tab.active {
      background-color: #eef0ff;
      color: #4361ee;
      font-weight: 500;
    }
    
    /* 样式1 - 网格布局 */
    .goods-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 15px;
      padding: 15px;
    }
    
    .goods-item {
      background-color: white;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }
    
    .goods-img {
      width: 100%;
      height: 120px;
      object-fit: cover;
    }
    
    .goods-info {
      padding: 10px;
    }
    
    .goods-name {
      font-size: 15px;
      font-weight: 500;
      margin: 0 0 5px 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .goods-desc {
      font-size: 12px;
      color: #999;
      margin: 0 0 8px 0;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    
    .goods-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .goods-points {
      color: #e63946;
      font-weight: 600;
      font-size: 14px;
    }
    
    .exchange-btn {
      padding: 4px 12px;
      background-color: #4361ee;
      color: white;
      border: none;
      border-radius: 15px;
      font-size: 13px;
      cursor: pointer;
    }
    
    /* 样式2 - 列表布局 */
    .goods-list {
      padding: 10px 0;
    }
    
    .list-item {
      display: flex;
      background-color: white;
      border-radius: 12px;
      overflow: hidden;
      margin: 0 15px 10px 15px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }
    
    .list-img {
      width: 100px;
      height: 100px;
      object-fit: cover;
    }
    
    .list-info {
      flex: 1;
      padding: 15px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    
    .list-name {
      font-size: 16px;
      font-weight: 500;
      margin: 0 0 5px 0;
    }
    
    .list-desc {
      font-size: 13px;
      color: #999;
      margin: 0;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    
    .list-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .list-points {
      color: #e63946;
      font-weight: 600;
    }
    
    .list-exchange {
      padding: 6px 18px;
      background-color: #4361ee;
      color: white;
      border: none;
      border-radius: 20px;
      font-size: 14px;
      cursor: pointer;
    }
    
    /* 样式3 - 特权会员 */
    .vip-header {
      background: linear-gradient(135deg, #ffb703, #fb8500);
      color: white;
      padding: 15px;
      border-radius: 12px;
      margin: 15px;
      text-align: center;
    }
    
    .vip-title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 5px;
    }
    
    .vip-desc {
      font-size: 13px;
      opacity: 0.9;
    }
    
    .privilege-list {
      padding: 0 15px;
    }
    
    .privilege-item {
      background-color: white;
      border-radius: 12px;
      padding: 15px;
      margin-bottom: 10px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }
    
    .privilege-header {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
    }
    
    .privilege-icon {
      width: 40px;
      height: 40px;
      border-radius: 8px;
      background-color: #fff0f3;
      color: #e63946;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 12px;
      font-size: 18px;
    }
    
    .privilege-title {
      font-size: 16px;
      font-weight: 500;
      margin: 0;
    }
    
    .privilege-content {
      font-size: 13px;
      color: #666;
      margin: 0 0 10px 0;
      padding-left: 52px;
    }
    
    .privilege-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-left: 52px;
    }
    
    .privilege-points {
      color: #e63946;
      font-weight: 600;
    }
    
    .privilege-level {
      font-size: 12px;
      color: #999;
    }
    
    /* 样式4 - 限时兑换 */
    .time-header {
      background: linear-gradient(135deg, #d90429, #ef233c);
      color: white;
      padding: 15px;
      border-radius: 12px;
      margin: 15px;
      text-align: center;
    }
    
    .time-title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 8px;
    }
    
    .countdown {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin: 10px 0;
    }
    
    .countdown-item {
      background-color: rgba(255,255,255,0.2);
      width: 36px;
      height: 36px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 16px;
    }
    
    .flash-sale {
      padding: 0 15px;
    }
    
    .flash-item {
      background-color: white;
      border-radius: 12px;
      overflow: hidden;
      margin-bottom: 15px;
      box-shadow: 0 2px 10px rgba(223, 45, 70, 0.1);
      border: 1px solid #ffe5e8;
    }
    
    .flash-tag {
      background-color: #ef233c;
      color: white;
      font-size: 12px;
      padding: 2px 8px;
      border-radius: 4px;
      display: inline-block;
      margin-bottom: 8px;
    }
    
    .flash-content {
      padding: 15px;
    }
    
    .flash-price {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 10px 0;
    }
    
    .flash-points {
      color: #ef233c;
      font-weight: 700;
      font-size: 18px;
    }
    
    .flash-original {
      color: #999;
      font-size: 13px;
      text-decoration: line-through;
    }
    
    .flash-progress {
      margin: 10px 0;
    }
    
    .progress-bar {
      height: 6px;
      background-color: #f1f1f1;
      border-radius: 3px;
      overflow: hidden;
    }
    
    .progress-fill {
      height: 100%;
      background-color: #ef233c;
    }
    
    .progress-text {
      font-size: 12px;
      color: #666;
      margin-top: 5px;
      text-align: right;
    }
    
    .flash-exchange {
      width: 100%;
      padding: 10px;
      background-color: #ef233c;
      color: white;
      border: none;
      border-radius: 8px;
      font-weight: 500;
      margin-top: 5px;
      cursor: pointer;
    }
    
    /* 提示框 */
    .toast {
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      background-color: rgba(0,0,0,0.8);
      color: white;
      border-radius: 8px;
      padding: 10px 15px;
      font-size: 14px;
      z-index: 1000;
      display: none;
    }
  </style>
</head>
<body>
  <!-- 提示框 -->
  <div class="toast" id="toast"></div>
  
  <!-- 顶部导航 -->
  <nav class="top-nav">
    <a href="#" class="nav-btn" id="backBtn">
      <i class="fa fa-angle-left"></i>
    </a>
    <h1 class="nav-title">积分兑换中心</h1>
    <a href="#" class="nav-btn" id="recordBtn">
      <i class="fa fa-history"></i>
    </a>
  </nav>
  
  <!-- 积分信息 -->
  <div class="points-info">
    <div>当前可用积分</div>
    <div class="points-amount">12,580</div>
    <div class="points-desc">积分可兑换商品、特权及服务</div>
    <a href="#" class="recharge-link">积分不足？立即充值</a>
  </div>
  
  <!-- 样式切换器 -->
  <div class="style-switcher">
    <div class="style-tabs">
      <div class="style-tab active" data-style="grid">网格布局</div>
      <div class="style-tab" data-style="list">列表布局</div>
      <div class="style-tab" data-style="privilege">特权会员</div>
      <div class="style-tab" data-style="limited">限时兑换</div>
    </div>
  </div>
  
  <!-- 网格布局样式 -->
  <div class="exchange-page active" id="grid">
    <!-- 分类标签 -->
    <div class="category-tabs">
      <div class="category-tab active" data-category="all">全部商品</div>
      <div class="category-tab" data-category="virtual">虚拟物品</div>
      <div class="category-tab" data-category="physical">实物商品</div>
      <div class="category-tab" data-category="service">服务特权</div>
      <div class="category-tab" data-category="discount">折扣券</div>
    </div>
    
    <!-- 商品网格 -->
    <div class="goods-grid">
      <div class="goods-item" data-id="1">
        <img src="https://picsum.photos/seed/goods1/300/300" alt="虚拟礼物" class="goods-img">
        <div class="goods-info">
          <h3 class="goods-name">虚拟礼物：爱心火箭</h3>
          <p class="goods-desc">直播时可向主播赠送的虚拟礼物</p>
          <div class="goods-footer">
            <span class="goods-points">500积分</span>
            <button class="exchange-btn">兑换</button>
          </div>
        </div>
      </div>
      
      <div class="goods-item" data-id="2">
        <img src="https://picsum.photos/seed/goods2/300/300" alt="会员月卡" class="goods-img">
        <div class="goods-info">
          <h3 class="goods-name">月度会员特权</h3>
          <p class="goods-desc">解锁专属表情包和无广告体验</p>
          <div class="goods-footer">
            <span class="goods-points">2000积分</span>
            <button class="exchange-btn">兑换</button>
          </div>
        </div>
      </div>
      
      <div class="goods-item" data-id="3">
        <img src="https://picsum.photos/seed/goods3/300/300" alt="咖啡券" class="goods-img">
        <div class="goods-info">
          <h3 class="goods-name">星巴克咖啡券</h3>
          <p class="goods-desc">全国门店通用，可兑换中杯咖啡</p>
          <div class="goods-footer">
            <span class="goods-points">3500积分</span>
            <button class="exchange-btn">兑换</button>
          </div>
        </div>
      </div>
      
      <div class="goods-item" data-id="4">
        <img src="https://picsum.photos/seed/goods4/300/300" alt="定制T恤" class="goods-img">
        <div class="goods-info">
          <h3 class="goods-name">平台定制T恤</h3>
          <p class="goods-desc">限量版纯棉T恤，多尺码可选</p>
          <div class="goods-footer">
            <span class="goods-points">8000积分</span>
            <button class="exchange-btn">兑换</button>
          </div>
        </div>
      </div>
      
      <div class="goods-item" data-id="5">
        <img src="https://picsum.photos/seed/goods5/300/300" alt="免广告" class="goods-img">
        <div class="goods-info">
          <h3 class="goods-name">30天免广告</h3>
          <p class="goods-desc">去除所有平台内展示的广告内容</p>
          <div class="goods-footer">
            <span class="goods-points">1200积分</span>
            <button class="exchange-btn">兑换</button>
          </div>
        </div>
      </div>
      
      <div class="goods-item" data-id="6">
        <img src="https://picsum.photos/seed/goods6/300/300" alt="电影票" class="goods-img">
        <div class="goods-info">
          <h3 class="goods-name">通用电影票</h3>
          <p class="goods-desc">全国影院通用，2D/3D通用</p>
          <div class="goods-footer">
            <span class="goods-points">4500积分</span>
            <button class="exchange-btn">兑换</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 列表布局样式 -->
  <div class="exchange-page" id="list">
    <!-- 分类标签 -->
    <div class="category-tabs">
      <div class="category-tab active" data-category="all">全部商品</div>
      <div class="category-tab" data-category="hot">热门兑换</div>
      <div class="category-tab" data-category="new">新品上线</div>
      <div class="category-tab" data-category="cheap">低积分区</div>
    </div>
    
    <!-- 商品列表 -->
    <div class="goods-list">
      <div class="list-item" data-id="10">
        <img src="https://picsum.photos/seed/list1/300/300" alt="年度会员" class="list-img">
        <div class="list-info">
          <div>
            <h3 class="list-name">年度会员尊享套餐</h3>
            <p class="list-desc">包含12个月会员服务，专属客服，优先体验新功能，每月赠送100积分</p>
          </div>
          <div class="list-footer">
            <span class="list-points">18000积分</span>
            <button class="list-exchange">立即兑换</button>
          </div>
        </div>
      </div>
      
      <div class="list-item" data-id="11">
        <img src="https://picsum.photos/seed/list2/300/300" alt="定制周边" class="list-img">
        <div class="list-info">
          <div>
            <h3 class="list-name">平台定制礼盒套装</h3>
            <p class="list-desc">包含定制马克杯、笔记本、钥匙扣各一件，限量100套</p>
          </div>
          <div class="list-footer">
            <span class="list-points">12000积分</span>
            <button class="list-exchange">立即兑换</button>
          </div>
        </div>
      </div>
      
      <div class="list-item" data-id="12">
        <img src="https://picsum.photos/seed/list3/300/300" alt="专属标识" class="list-img">
        <div class="list-info">
          <div>
            <h3 class="list-name">专属身份标识</h3>
            <p class="list-desc">个人主页展示特殊标识，持续30天，彰显独特身份</p>
          </div>
          <div class="list-footer">
            <span class="list-points">800积分</span>
            <button class="list-exchange">立即兑换</button>
          </div>
        </div>
      </div>
      
      <div class="list-item" data-id="13">
        <img src="https://picsum.photos/seed/list4/300/300" alt="音乐会员" class="list-img">
        <div class="list-info">
          <div>
            <h3 class="list-name">音乐平台月卡</h3>
            <p class="list-desc">可兑换主流音乐平台月卡一张，三选一</p>
          </div>
          <div class="list-footer">
            <span class="list-points">2500积分</span>
            <button class="list-exchange">立即兑换</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 特权会员样式 -->
  <div class="exchange-page" id="privilege">
    <div class="vip-header">
      <div class="vip-title">会员专属特权兑换</div>
      <div class="vip-desc">会员等级越高，可兑换的特权越丰富</div>
    </div>
    
    <!-- 分类标签 -->
    <div class="category-tabs">
      <div class="category-tab active" data-category="all">全部特权</div>
      <div class="category-tab" data-category="bronze">青铜会员</div>
      <div class="category-tab" data-category="silver">白银会员</div>
      <div class="category-tab" data-category="gold">黄金会员</div>
      <div class="category-tab" data-category="platinum">铂金会员</div>
    </div>
    
    <!-- 特权列表 -->
    <div class="privilege-list">
      <div class="privilege-item" data-id="20">
        <div class="privilege-header">
          <div class="privilege-icon">
            <i class="fa fa-star"></i>
          </div>
          <h3 class="privilege-title">直播房间置顶</h3>
        </div>
        <p class="privilege-content">在指定直播间内，您的发言将获得置顶特权，持续24小时，让更多人看到您的观点。</p>
        <div class="privilege-footer">
          <div>
            <span class="privilege-points">3000积分</span>
            <span class="privilege-level">· 白银会员及以上</span>
          </div>
          <button class="exchange-btn">兑换</button>
        </div>
      </div>
      
      <div class="privilege-item" data-id="21">
        <div class="privilege-header">
          <div class="privilege-icon" style="background-color:#e0f7fa; color:#0077b6;">
            <i class="fa fa-shield"></i>
          </div>
          <h3 class="privilege-title">账号安全锁</h3>
        </div>
        <p class="privilege-content">开启高级安全保护，异地登录需验证，重要操作二次确认，保障账号安全30天。</p>
        <div class="privilege-footer">
          <div>
            <span class="privilege-points">1500积分</span>
            <span class="privilege-level">· 青铜会员及以上</span>
          </div>
          <button class="exchange-btn">兑换</button>
        </div>
      </div>
      
      <div class="privilege-item" data-id="22">
        <div class="privilege-header">
          <div class="privilege-icon" style="background-color:#f3e5f5; color:#6a1b9a;">
            <i class="fa fa-paint-brush"></i>
          </div>
          <h3 class="privilege-title">专属皮肤套装</h3>
        </div>
        <p class="privilege-content">包含5套限定皮肤，可自定义个人主页和聊天界面，有效期90天。</p>
        <div class="privilege-footer">
          <div>
            <span class="privilege-points">5000积分</span>
            <span class="privilege-level">· 黄金会员及以上</span>
          </div>
          <button class="exchange-btn">兑换</button>
        </div>
      </div>
      
      <div class="privilege-item" data-id="23">
        <div class="privilege-header">
          <div class="privilege-icon" style="background-color:#e8f5e9; color:#2e7d32;">
            <i class="fa fa-user-plus"></i>
          </div>
          <h3 class="privilege-title">名人一对一咨询</h3>
        </div>
        <p class="privilege-content">30分钟专业领域名人在线咨询，可提前提交问题，获得针对性解答。</p>
        <div class="privilege-footer">
          <div>
            <span class="privilege-points">20000积分</span>
            <span class="privilege-level">· 铂金会员专属</span>
          </div>
          <button class="exchange-btn">兑换</button>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 限时兑换样式 -->
  <div class="exchange-page" id="limited">
    <div class="time-header">
      <div class="time-title">限时积分兑换活动</div>
      <div>距离活动结束还有：</div>
      <div class="countdown">
        <div class="countdown-item" id="cd-hours">08</div>
        <div class="countdown-item">:</div>
        <div class="countdown-item" id="cd-minutes">35</div>
        <div class="countdown-item">:</div>
        <div class="countdown-item" id="cd-seconds">42</div>
      </div>
      <div class="vip-desc">每日限量兑换，先到先得</div>
    </div>
    
    <!-- 分类标签 -->
    <div class="category-tabs">
      <div class="category-tab active" data-category="all">全部活动</div>
      <div class="category-tab" data-category="today">今日上新</div>
      <div class="category-tab" data-category="hot">热门抢购</div>
      <div class="category-tab" data-category="soon">即将结束</div>
    </div>
    
    <!-- 限时兑换列表 -->
    <div class="flash-sale">
      <div class="flash-item" data-id="30">
        <img src="https://picsum.photos/seed/flash1/600/300" alt="智能手环" class="goods-img" style="height:180px;">
        <div class="flash-content">
          <span class="flash-tag">今日特惠</span>
          <h3 class="list-name">智能运动手环</h3>
          <p class="list-desc">支持心率监测、睡眠分析、运动记录，防水设计，续航7天</p>
          
          <div class="flash-price">
            <span class="flash-points">9900积分</span>
            <span class="flash-original">原价：15000积分</span>
          </div>
          
          <div class="flash-progress">
            <div class="progress-bar">
              <div class="progress-fill" style="width:75%;"></div>
            </div>
            <div class="progress-text">已兑换75% · 剩余25件</div>
          </div>
          
          <button class="flash-exchange">立即兑换</button>
        </div>
      </div>
      
      <div class="flash-item" data-id="31">
        <img src="https://picsum.photos/seed/flash2/600/300" alt="视频会员" class="goods-img" style="height:180px;">
        <div class="flash-content">
          <span class="flash-tag">限时折扣</span>
          <h3 class="list-name">视频平台年度会员</h3>
          <p class="list-desc">支持所有热门影视平台，可观看VIP内容，无广告干扰</p>
          
          <div class="flash-price">
            <span class="flash-points">5000积分</span>
            <span class="flash-original">原价：8000积分</span>
          </div>
          
          <div class="flash-progress">
            <div class="progress-bar">
              <div class="progress-fill" style="width:42%;"></div>
            </div>
            <div class="progress-text">已兑换42% · 剩余58件</div>
          </div>
          
          <button class="flash-exchange">立即兑换</button>
        </div>
      </div>
      
      <div class="flash-item" data-id="32">
        <img src="https://picsum.photos/seed/flash3/600/300" alt="购物卡" class="goods-img" style="height:180px;">
        <div class="flash-content">
          <span class="flash-tag">秒杀</span>
          <h3 class="list-name">100元购物卡</h3>
          <p class="list-desc">全国通用购物卡，支持线上线下多种场景消费</p>
          
          <div class="flash-price">
            <span class="flash-points">8800积分</span>
            <span class="flash-original">原价：10000积分</span>
          </div>
          
          <div class="flash-progress">
            <div class="progress-bar">
              <div class="progress-fill" style="width:93%;"></div>
            </div>
            <div class="progress-text">已兑换93% · 剩余7件</div>
          </div>
          
          <button class="flash-exchange">立即兑换</button>
        </div>
      </div>
    </div>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 获取元素
    const styleTabs = document.querySelectorAll('.style-tab');
    const exchangePages = document.querySelectorAll('.exchange-page');
    const categoryTabs = document.querySelectorAll('.category-tab');
    const exchangeBtns = document.querySelectorAll('.exchange-btn, .list-exchange, .flash-exchange');
    const backBtn = document.getElementById('backBtn');
    const recordBtn = document.getElementById('recordBtn');
    const toast = document.getElementById('toast');
    
    // 样式切换
    styleTabs.forEach(tab => {
      tab.addEventListener('click', function() {
        // 移除所有激活状态
        styleTabs.forEach(t => t.classList.remove('active'));
        exchangePages.forEach(page => page.classList.remove('active'));
        
        // 设置当前激活状态
        this.classList.add('active');
        const style = this.getAttribute('data-style');
        document.getElementById(style).classList.add('active');
        
        showToast(`已切换到${this.textContent}视图`);
      });
    });
    
    // 分类标签切换
    categoryTabs.forEach(tab => {
      tab.addEventListener('click', function() {
        // 获取同页面的所有分类标签
        const pageId = document.querySelector('.exchange-page.active').id;
        const pageTabs = document.querySelector(`#${pageId} .category-tabs`).querySelectorAll('.category-tab');
        
        // 移除同页面的激活状态
        pageTabs.forEach(t => t.classList.remove('active'));
        
        // 设置当前激活状态
        this.classList.add('active');
        
        showToast(`已切换到${this.textContent}`);
      });
    });
    
    // 兑换按钮点击事件
    exchangeBtns.forEach(btn => {
      btn.addEventListener('click', function() {
        const item = this.closest('.goods-item, .list-item, .privilege-item, .flash-item');
        const itemId = item.getAttribute('data-id');
        const itemName = item.querySelector('.goods-name, .list-name, .privilege-title').textContent;
        
        showToast(`确认兑换 ${itemName}？`);
        
        // 模拟兑换确认
        setTimeout(() => {
          showToast(`${itemName} 兑换成功！`);
        }, 1500);
      });
    });
    
    // 返回按钮点击事件
    backBtn.addEventListener('click', function() {
      showToast('返回上一页');
      // 实际应用中可以使用history.back()
    });
    
    // 兑换记录按钮点击事件
    recordBtn.addEventListener('click', function() {
      showToast('查看兑换记录');
    });
    
    // 显示提示
    function showToast(message) {
      toast.textContent = message;
      toast.style.display = 'block';
      
      setTimeout(() => {
        toast.style.display = 'none';
      }, 2000);
    }
    
    // 活动倒计时
    function updateCountdown() {
      const secondsEl = document.getElementById('cd-seconds');
      let seconds = parseInt(secondsEl.textContent);
      
      seconds--;
      if (seconds < 0) {
        seconds = 59;
        const minutesEl = document.getElementById('cd-minutes');
        let minutes = parseInt(minutesEl.textContent);
        minutes--;
        if (minutes < 0) {
          minutes = 59;
          const hoursEl = document.getElementById('cd-hours');
          let hours = parseInt(hoursEl.textContent);
          hours--;
          if (hours < 0) hours = 0;
          hoursEl.textContent = hours.toString().padStart(2, '0');
        }
        minutesEl.textContent = minutes.toString().padStart(2, '0');
      }
      secondsEl.textContent = seconds.toString().padStart(2, '0');
    }
    
    // 每秒更新一次倒计时
    setInterval(updateCountdown, 1000);
  </script>
</body>
</html>
